<template>
	<div
		class="h-15 flex items-center px-3 text-white border-b border-border-1 duration-300"
		:class="bgClass">
		<base-icon name="betslip" class="text-[20px]"></base-icon>
		<div class="ml-2 app-font-bold">{{ $t('betslip.title') }}</div>
		<div class="flex-1"></div>
		<base-popselect
			v-model="betslipStore.acceptOddsMode"
			size="small"
			selected-class="mr-1"
			:options="acceptOddsModeList"></base-popselect>
		<!-- <div class="m-1 text-sm">{{ $t('betslip.acceptOddsChange') }}</div>
		<n-switch
			class="mr-2"
			:class="{ 'opacity-40': !betslipStore.isAcceptOddsChange }"
			size="small"
			:rail-style="railStyle"
			:value="betslipStore.isAcceptOddsChange"
			@update:value="betslipStore.toggleAcceptOddsChange">
			<template #checked-icon>
				<base-icon name="tick" class="text-white" />
			</template>
		</n-switch> -->
		<!-- <betting-odds class="mr-2 text-lg" :value="betslipStore.oddsSum"></betting-odds> -->
		<base-icon name="close" class="text-[20px]" @click="onClose"></base-icon>
	</div>
</template>

<script lang="ts" setup>
import { computed } from 'vue'
import { BaseIcon, BasePopselect } from '@/components/base'
// import { BettingOdds } from '@/components/betting'
import { useLayoutStore, useBetslipStore } from '@/store'
import { enumList } from '@/utils'
import { AcceptOddsMode } from '@/enums'

const layoutStore = useLayoutStore()
const betslipStore = useBetslipStore()

const bgClass = computed(() => {
	if (betslipStore.acceptOddsMode === AcceptOddsMode.AcceptAny) {
		return 'bg-gradient-to-r from-gradient-1 to-gradient-2'
	} else if (betslipStore.acceptOddsMode === AcceptOddsMode.AcceptHigher) {
		return 'bg-gradient-to-r from-gradient-1 to-[#00BE7A]'
	} else {
		return 'bg-primary'
	}
})

const acceptOddsModeList = computed(() => enumList(AcceptOddsMode))

// const railStyle = () => {
// 	const style: CSSProperties = {
// 		background: '#fff'
// 	}
// 	return style
// }

const onClose = () => layoutStore.setSidebar('')
</script>

<style scoped lang="scss">
.n-switch {
	:deep(.n-switch__button) {
		background-color: var(--color-primary) !important;
	}
	&.n-switch--active {
		:deep(.n-switch__button) {
			background-color: var(--color-linear-gradient-2) !important;
		}
	}
}
</style>
